// vars
// --------------------------------
$appHeight = 700px
$appBorderSize = 2px
$titleHeight = 50px
$contentHeight = $appHeight - $titleHeight
// --------------------------------

// animation
@import "animation"

// color
@import "color"

// icon-font
@import "icon-font"

*[no-select]
    -webkit-user-select none

*[drag]
    -webkit-app-region drag

*[no-drag]
    -webkit-app-region no-drag

.title-high
    height $titleHeight

.content-high
    height $contentHeight

// global style & reset
html
    height $appHeight + $appBorderSize * 2
    overflow hidden
    background transparent

body
    @extend .animation-base
    height inherit
    overflow hidden
    background transparent
    font-family Microsoft YaHei

    md-list
        padding 0px 0;

h1
h2
h3
h4
h5
h6
    margin-bottom 1rem
    margin-top 1rem

pre
    flex 1
    margin 0
    white-space pre-wrap
    text-rendering optimizeLegibility
    font-family RobotoDraft, Roboto, 'Helvetica Neue', sans-serif

a
    &.link
        color $BLUE
        text-decoration none
        border-bottom 2px solid transparent
        cursor pointer
        &:hover
            color $LIGHT_BLACK
            border-bottom-color $LIGHT_BLACK
        &:active
            outline none

::-webkit-scrollbar
    width 10px

::-webkit-scrollbar-track
    background none

::-webkit-scrollbar-thumb
    @extend .animation-base
    background $LIGHT_GREY

::-webkit-scrollbar-thumb:hover
    background $LIGHT_GREY

*[ng-click]
    outline none

// app layer
#app
    margin auto
    width "calc(100% - %s * 2)" % $appBorderSize
    height $appHeight
    margin-top $appBorderSize
    background $WHITE // basic background color
    box-shadow 0px 0px 4px 0px rgba(0,0,0,0.7)
    overflow hidden

// titlebar
.titlebar
    @extend *[drag]
    @extend *[no-select]
    @extend .title-high
    width 100%
    >div
        height inherit
        font-weight 600

// control button
.titlebar-button
    @extend .animation-base
    @extend *[no-drag]
    @extend *[no-select]
    display inherit
    position relative
    height 100%
    padding 0 13px
    color $DARK_GREY
    cursor pointer
    &::after
        content ''
        position absolute
        left 1px
        bottom 1px
        width calc(100% - 2px)
        height 0px
        background $WHITE
    &.active
    &:hover
        color $WHITE
        background rgba(0,0,0,0.15)
        &::after
            height 3px
        md-icon
            color $WHITE
    md-icon
        color $DARK_GREY
    p
        padding-left 5px
